<template>
  <div class="parameter-renderer" :style="containerStyle">
    <!-- 设计模式显示 -->
    <div v-if="mode === 'design'" class="design-preview">
      <span class="param-name">{{ displayName }}</span>
      <span class="param-value">{{ formattedValue }}</span>
      <span v-if="paramConfig?.unit" class="param-unit">{{ paramConfig.unit }}</span>
    </div>
    
    <!-- 预览和生成模式显示 -->
    <div v-else class="runtime-display">
      <template v-if="displayFormat === 'nameValue'">
        <span class="param-name">{{ displayName }}：</span>
        <span class="param-value">{{ formattedValue }}</span>
        <span v-if="showUnit && paramConfig?.unit" class="param-unit">{{ paramConfig.unit }}</span>
      </template>
      
      <template v-else-if="displayFormat === 'valueWithUnit'">
        <span class="param-value">{{ formattedValue }}</span>
        <span v-if="showUnit && paramConfig?.unit" class="param-unit">{{ paramConfig.unit }}</span>
      </template>
      
      <template v-else-if="displayFormat === 'full'">
        <div class="full-display">
          <div class="param-header">{{ displayName }}</div>
          <div class="param-content">
            <span class="param-value">{{ formattedValue }}</span>
            <span v-if="showUnit && paramConfig?.unit" class="param-unit">{{ paramConfig.unit }}</span>
          </div>
        </div>
      </template>
      
      <template v-else>
        <span class="param-value">{{ formattedValue }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { findParamByCode } from '@/utils/tools'

export default {
  name: 'ParameterRenderer',
  props: {
    component: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    paramConfig() {
      const { content = {} } = this.component
      return findParamByCode(content.paramCode, this.config.paramGroups)
    },
    
    displayName() {
      const { content = {} } = this.component
      return content.displayName || this.paramConfig?.paramName || this.component.content?.paramCode || '参数'
    },
    
    displayFormat() {
      return this.component.content?.format || 'value'
    },
    
    showUnit() {
      return this.component.content?.showUnit !== false
    },
    
    rawValue() {
      const { content = {} } = this.component
      if (this.mode === 'design') {
        return content.defaultValue || '示例值'
      }
      
      const value = this.testData[content.paramCode]
      return value !== undefined ? value : '-'
    },
    
    formattedValue() {
      const value = this.rawValue
      
      // 数值类型处理精度
      if (this.paramConfig?.dataType === 'number' && typeof value === 'number') {
        const precision = this.component.content?.precision ?? this.paramConfig?.precision ?? 2
        return value.toFixed(precision)
      }
      
      return value
    },
    
    containerStyle() {
      const { content = {} } = this.component
      return {
        textAlign: content.align || 'left',
        fontSize: `${content.fontSize || 14}px`,
        fontWeight: content.fontWeight || 'normal',
        color: content.color || '#000000',
        padding: '4px 8px'
      }
    }
  }
}
</script>

<style scoped>
.parameter-renderer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.design-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-style: italic;
}

.runtime-display {
  display: flex;
  align-items: center;
  gap: 4px;
}

.param-name {
  font-weight: 500;
}

.param-value {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

.param-unit {
  color: #666;
  font-size: 0.9em;
}

.full-display {
  text-align: center;
}

.param-header {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 2px;
}

.param-content {
  font-weight: bold;
}
</style>